  // Resizer straddles the column border and is an invisible hitzone for dragging
.euiDataGridColumnResizer {
  position: absolute;
  top: 0;
  right: -$euiSizeS;
  height: 100%;
  width: $euiSize;
  cursor: ew-resize;
  opacity: 0;
  z-index: 2; // Needs to be a level above the cells themselves in case of overlaps

  // Center a vertical line within the button above
  &:after {
    content: '';
    position: absolute;
    left: $euiSizeS - 1px;
    top: 0;
    bottom: 0;
    width: $euiDataGridColumnResizerWidth;
    background-color: $euiColorPrimary;
  }

  &:hover,
  &:active {
    opacity: 1;

    ~ .euiDataGridHeaderCell__content {
      user-select: none;
    }
  }
}

// This is important. Because the resizer sits in the negative space to the right of the column
// it can cause the full grid to be a few pixels longer than it actually is. So for the last one
// we don't use negative positioning and the borders from the cell will match the container.
@include euiDataGridHeaderCell {
  &:last-child {

    .euiDataGridColumnResizer {
      right: 0;

      &:after {
        left: auto;
        right: 0;
      }
    }
  }
}
